<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">
        <el-tabs :stretch="true">
            <el-tab-pane label="基础">
                <el-form label-width="120px" label-position="right" v-if="currentItem">
                    <el-form-item label="默认图标地址" required>
                        <image-picker v-model="currentItem.iconPath"></image-picker>
                    </el-form-item>

                    <el-form-item label="选中图标地址" required>
                        <image-picker v-model="currentItem.selectedIconPath"></image-picker>
                    </el-form-item>

                    <el-form-item label="按钮文字" required>
                        <el-input style="width: 200px" maxlength="5" v-model="currentItem.text" placeholder></el-input>
                    </el-form-item>

                    <el-form-item label="文字颜色" required>
                        <el-color-picker v-model="currentItem.color"></el-color-picker>
                    </el-form-item>

                    <el-form-item label="选中文字颜色" required>
                        <el-color-picker v-model="currentItem.selectedColor"></el-color-picker>
                    </el-form-item>

                    <el-form-item label="页面路径" required>
                        <!-- <el-input style="width: 200px" v-model="currentItem.pagePath" placeholder></el-input> -->
                        <el-select v-model="currentItem.pagePath" placeholder="请选择">
                            <el-option v-for="item in pagePaths" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否启用">
                        <el-switch style="width: 200px" active-text="已启用" inactive-text="未启用"
                            v-model="currentItem.enable"></el-switch>
                    </el-form-item>

                    <el-form-item label="排序">
                        <el-input style="width: 200px" type="number" v-model="currentItem.number"
                            placeholder="由小到大"></el-input>
                    </el-form-item>

                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script>
import { getNewsList } from "@/api/news";

export default {
    components: {
    },
    watch: {
        currentItem: {
            handler (newValue, oldValue) {
                this.$store.commit("pagemaker/setTabbar", newValue);
            },
            deep: true
        }
    },
    computed: {
        currentItem: function () {
            return this.$store.state.pagemaker.pageTabbar
        },
    },
    props: {
    },
    data () {
        return {
            loading: false,
            // currentItem: {},
            pagePaths: [
                {
                    name: '首页',
                    value: '/pages/home/home'
                },
                {
                    name: '我的',
                    value: '/pages/myself/index'
                },
                {
                    name: '发现',
                    value: '/pages/faxian/index'
                },
                {
                    name: '信息',
                    value: '/pages/messages/index'
                },
                {
                    name: '找房',
                    value: '/pages/zhaofang/index'
                },
                {
                    name: '自定义页面1',
                    value: '/pages/tab1/index'
                },
                {
                    name: '自定义页面2',
                    value: '/pages/tab2/index'
                }
            ]
        };
    },
    mounted: function () {
        // this.currentItem = this.$store.state.pagemaker.pageTabbar
    },

    methods: {
    },
};
</script>
  
<style scoped>
.styles {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.styles li {
    width: 100px;
    height: 80px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
}

.styles li:hover {
    border: 1px solid #f4f4f4;
}

.styles li.active {
    border: 1px solid #1989fa;
}
</style>